<template>
  <el-dialog
    :visible="showDialog"
    title="新增/修改"
    :close-on-click-modal="false"
    @close="closeDialog"
  >
    <el-form label-width="100px" :model="queryData" :rules="rules">
      <el-row type="flex" justify="state">
        <el-form-item label="菜单名称" prop="title">
          <el-input v-model="queryData.title" style="width: 240px" placeholder="请输入菜单名称" />
        </el-form-item>
        <el-form-item label="菜单地址" prop="path">
          <el-input v-model="queryData.path" style="width: 240px" placeholder="路由地址以/开头" />
        </el-form-item>
      </el-row>
      <el-row type="flex" justify="state">
        <el-form-item label="组件地址">
          <el-input
            style="width: 240px"
            placeholder="组件存储路径地址，不以/开头"
          />
        </el-form-item>
        <el-form-item label="权限标识" prop="mark">
          <el-input v-model="queryData.mark" style="width: 240px" placeholder="格式:contriler@action" />
        </el-form-item>
      </el-row>
      <el-row type="flex" justify="state">
        <el-form-item label="菜单图标">
          <el-input
            style="width: 240px"
            placeholder="组件存储路径地址，不以/开头"
          />
        </el-form-item>
        <el-form-item label="重定向">
          <el-input style="width: 240px" placeholder="请输入Redirect" />
        </el-form-item>
      </el-row>
      <el-row type="flex" justify="state">
        <el-form-item label="是否外链">
          <el-radio v-model="queryData.is_link" :label="1">是</el-radio>
          <el-radio v-model="queryData.is_link" :label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="排序" label-width="235px">
          <el-input-number v-model="queryData.sort" :min="10" style="width: 240px" placeholder="请输入Redirect" />
        </el-form-item>
      </el-row>
      <el-row type="flex" justify="state">
        <el-form-item label="是否显示">
          <el-radio v-model="queryData.is_show" :label="1">是</el-radio>
          <el-radio v-model="queryData.is_show" :label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="是否缓存" label-width="235px">
          <el-radio v-model="queryData.is_cache" :label="1">是</el-radio>
          <el-radio v-model="queryData.is_cache" :label="0">否</el-radio>
        </el-form-item>
      </el-row>
      <el-row type="flex" justify="end">
        <el-button size="small" type="primary">确定</el-button>
        <el-button size="small" @click="closeDialog">取消</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
export default {
  name: 'MenuDialog',
  data() {
    return {
      showDialog: false,
      queryData: {
        // 是否外链
        is_link: null,
        // 排序
        sort: '',
        // 显示
        is_show: null,
        // 是否缓存
        is_cache: null,
        component: '',
        icon: '',
        mark: '',
        path: '',
        pid: '',
        redirect: '',
        title: '',
        type: ''
      },
      rules: {
        title: [{ required: true, message: '请输入', trigger: 'blur' }],
        path: [{ required: true, message: '请输入', trigger: 'blur' }],
        mark: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  methods: {
    closeDialog() {
      this.showDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
